<div class="layui-card">
    <div class="layui-card-header">检索条件</div>
    <div class="layui-card-body">
        <form id="auth-query-form" class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">显示名称</label>
                    <div class="layui-input-inline">
                        <input name="displayName" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">权限类型</label>
                    <div class="layui-input-inline">
                        <select name="authType">
                            <option value="">请选择</option>
                            <option th:each="dict,authStat:${authTypeList}" th:value="${dict.dataCode}" th:text="${dict.dataText}"></option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">创建时间</label>
                    <div class="layui-input-inline">
                        <input name="createTimeBetween" id="createTime" placeholder="请选择" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
                <button class="layui-btn" lay-filter="auth-query-submit" lay-submit><i class="layui-icon">&#xe615;</i> 检索</button>
            </div>
        </form>
    </div>
</div>

<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">权限管理</h2>
        <div class="layui-btn-group" style="float: right">
            <button class="layui-btn layui-btn-sm" id="btnAdd"><i class="layui-icon">&#xe654;</i> 增加</button>
            <button class="layui-btn layui-btn-sm layui-btn-disabled" id="btnDel" disabled="true"><i class="layui-icon">&#xe640;</i> 删除</button>
        </div>
    </div>
    <div class="layui-card-body" style="padding-top: 0px;">
        <table class="layui-table" id="auth-table" lay-filter="auth-table"></table>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="displayNameTpl">
    {{#  if(d.authType === 'MODULE'){ }}
        <span>&nbsp;</span>{{ d.displayName }}
    {{#  } else if(d.authType === 'MENU'){ }}
        <span>|——</span>{{ d.displayName }}
    {{#  } else if(d.authType === 'URL'){ }}
        <span>|————</span>{{ d.displayName }}
    {{#  } else if(d.authType === 'BUTTON'){ }}
        <span>|——————</span>{{ d.displayName }}
    {{#  } }}
</script>
<!-- 权限类型列 -->
<script type="text/html" id="authTypeTpl">
    {{#  if(d.authType === 'MODULE'){ }}
        <span class="layui-badge layui-bg-black">{{ d.authTypeText }}</span>
    {{#  } else if(d.authType === 'MENU'){ }}
        <span class="layui-badge layui-bg-blue">{{ d.authTypeText }}</span>
    {{#  } else if(d.authType === 'URL'){ }}
        <span class="layui-badge-rim">{{ d.authTypeText }}</span>
    {{#  } else if(d.authType === 'BUTTON'){ }}
        <span class="layui-badge layui-bg-gray">{{ d.authTypeText }}</span>
    {{#  } }}
</script>
<!-- 是否可见列 -->
<script type="text/html" id="isDeleteText">
    {{#  if(d.isDelete === '0'){ }}
        <span class="layui-badge layui-bg-gray" style="border-radius: 100px;">显示</span>
    {{#  } else if(d.isDelete === '1'){ }}
        <span class="layui-badge layui-bg-black" style="border-radius: 100px;">隐藏</span>
    {{#  } }}
</script>
<script type="text/html" id="auth-table-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
</script>

<script>
    layui.use(['jquery', 'form', 'table', 'util', 'sadmin', 'element', 'laydate'], function () {
        var $ = layui.$ //重点处
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var util = layui.util;
        var sadmin = layui.sadmin;
        var element = layui.element;
        var laydate = layui.laydate;

        form.render('select');

        //日期
        laydate.render({
            elem: '#createTime',
            theme: '#393D49',
            range: '~'
        });

        // 渲染表格
        table.render({
            elem: '#auth-table',
            url: 'system/auth/pageList',
            skin: 'line',
            page: true,
            cols: [
                [
                    {type:'checkbox', fixed: 'left'},
                    {type: 'numbers', title: '序号'},
                    {field: 'authTypeText', width: 100, title: '权限类型', templet: '#authTypeTpl'},
                    {field: 'displayName', sort: true, title: '显示名称', templet: '#displayNameTpl'},
                    {field: 'directUrl', width: 250, title: '资源地址'},
                    {field: 'isDeleteText', width: 70, title: '可见', templet: '#isDeleteText'},
                    {field: 'authPerms', title: '权限标识'},
                    {field: 'sortOrder', width: 100, title: '显示排序'},
                    {align: 'center', width: 80, toolbar: '#auth-table-bar', title: '操作', fixed: 'right'}
                ]
            ]
        });
        
        
        //监听表格复选框选择状态
        table.on('checkbox(auth-table)', function(obj){
        	var checkStatus = table.checkStatus('auth-table');
        	var data = checkStatus.data;
        	if (null != data && data.length >0) {
        		$('#btnDel').removeClass('layui-btn-disabled').removeAttr('disabled',"true");
        	}
        	else {
        		$('#btnDel').addClass('layui-btn-disabled').attr('disabled',"true");
        	}
       	});

        // 添加按钮点击事件
        $('#btnAdd').click(function () {
            showEditModel();
        });

        // 删除按钮点击事件
        $('#btnDel').click(function () {
            var checkStatus = table.checkStatus('auth-table');
            var idsArray = new Array(checkStatus.data.length);
            $.each(checkStatus.data,function(idx, item) {
                idsArray[idx] = item.pid;
            })
            var ids = idsArray.join(',');
            console.log(ids);

            layer.confirm('确定删除所选权限吗？', function (i) {
                layer.close(i);
                layer.load(2);
                $.post('system/auth/drop', {
                    ids: ids
                }, function (result) {
                    layer.closeAll('loading');
                    layer.msg(result.msg);
                    table.reload('auth-table', {});
                });
            });
        });

        // 工具条点击事件
        table.on('tool(auth-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'edit') { // 修改
                showEditModel(data);
            }
        });

        // 显示表单弹窗
        var showEditModel = function (data) {
            console.log(data);
            var title = data ? '修改权限' : '添加权限';
            sadmin.putTempData('system_auth', data);
            sadmin.popupCenter({
                title: title,
                path: '/system/auth/form',
                area: ['560px', '560px'],
                offset: 'auto',
                finish: function () {
                    table.reload('auth-table', {});
                }
            });
        };

        // 搜索提交事件
        form.on('submit(auth-query-submit)', function (data) {
            table.reload('auth-table', {
                where: data.field
            });
            return false;
        });

    });
</script>